<script setup lang="js">
import {DataAnalysis, Odometer, Search, SetUp, Tools} from "@element-plus/icons-vue";
import LcuProfile from "@share/components/lcu/LcuProfile.vue";
import {summonerInfoStore} from "@/renderer/main-window/stores/storeSummonerInfo.js";
import LcuClientLink from "@share/components/common/icons/LcuClientLink.vue";
import {storeSystemCertificateInfo} from "@/renderer/main-window/stores/storeSystemCertificateInfo.js";
import LcuClientUnLink from "@share/components/common/icons/LcuClientUnLink.vue";
</script>
<template>
  <el-container>
    <el-aside
        style="width: auto;display: flex;flex-direction:column;align-items: center;justify-content: space-between">
      <el-menu
          :collapse="false"
          mode="vertical"
          router
          default-active="/home"
      >
        <el-menu-item index="/home">
          <el-icon>
            <HomeFilled/>
          </el-icon>
          <template #title>
            主页
          </template>
        </el-menu-item>
        <el-menu-item index="/currentGaming">
          <el-icon>
            <DataAnalysis/>
          </el-icon>
          <template #title>
            对局看板
          </template>
        </el-menu-item>

        <el-menu-item index="/gameRecord/search">
          <el-icon>
            <Search/>
          </el-icon>
          <template #title>
            战绩查询
          </template>
        </el-menu-item>

        <el-menu-item index="/developer-tool">
          <el-icon>
            <Odometer/>
          </el-icon>
          <template #title>
            DevTools
          </template>
        </el-menu-item>
      </el-menu>

      <!--      菜单下方个人信息栏-->
      <!--      <el-button>暗黑模式</el-button>-->
      <div class="home-menu-floor-always-wrapper">
        <!--        <el-switch></el-switch>-->
        <div class="menu-current-summoner-info">
          <LcuProfile :profile-id="summonerInfoStore().currentSummonerInfo?.profileIconId"/>
          <el-text></el-text>
          <el-text>{{ summonerInfoStore().currentSummonerInfo?.gameName }}</el-text>
        </div>
        <div style="display: flex;align-items: center;justify-content: center">
          <LcuClientLink v-if="storeSystemCertificateInfo().systemInfo.lcuServerStatus==='connect'"/>
          <LcuClientUnLink v-else-if="storeSystemCertificateInfo().systemInfo.lcuServerStatus==='disconnect'"/>

          <el-text v-if="storeSystemCertificateInfo().systemInfo.lcuServerStatus==='connect'">已连接</el-text>
          <el-text v-else-if="storeSystemCertificateInfo().systemInfo.lcuServerStatus==='disconnect'">未连接</el-text>
        </div>

      </div>
    </el-aside>
    <el-main class="twist-main-container">
      <router-view v-slot="{ Component }">
        <keep-alive :max="5">
          <component :is="Component"/>
        </keep-alive>
      </router-view>
    </el-main>
  </el-container>
</template>

<style scoped lang="scss">
:deep(.el-main) {
  padding: 6px 24px 24px;
}

.home-menu-floor-always-wrapper {
  margin-bottom: 36px;
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
}

.menu-current-summoner-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100px;

  & > span {
    margin: 3px 0;
  }
}
</style>